<template>
  <div>
    <div class="toolbar">
      <!--<el-form :inline="true" size="small">-->
      <!--<el-form-item label="商户名称">-->
      <!--<el-input v-model="merchant_name"/>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="修改时间">-->
      <!--<el-date-picker-->
      <!--v-model="pickTime1"-->
      <!--:picker-options="pickerOptions"-->
      <!--:clearable="false"-->
      <!--type="daterange"-->
      <!--range-separator="至"-->
      <!--start-placeholder="开始日期"-->
      <!--end-placeholder="结束日期"-->
      <!--align="right"-->
      <!--value-format="yyyy-MM-dd"/>-->
      <!--</el-form-item>-->
      <!--<el-button size="small" type="primary" @click="seach">搜索</el-button>-->
      <!--</el-form>-->
      <div>  <el-button style="float: right;margin: 0 0 10px 0" size="small" type="primary" @click="addBusin">新增商户</el-button></div>
      <el-table
        :data="tableData"
        :default-sort = "{prop: 'user_id'}"
        size="small"
        stripe
        border
        fit
        highlight-current-row
      >
        <el-table-column
          v-for ="(item, index) in key_mapper"
          :key = "index"
          :prop="item.key"
          :label="item.name"
          :min-width="item.width"
        />
        <el-table-column
          label="操作"
          min-width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)" >编辑</el-button>
            <!--<el-button type="primary" size="mini" @click="deleteqa(scope.row.id)" >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page"
        :page-size="size"
        :total.sync="total_count"
        layout="prev, pager, next, jumper"
        @current-change="currentChange"/>
      <el-dialog :visible.sync="dialogFormVisible" title="玩家帮助详情">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商户名称" prop="merchant_name" width>
            <el-input v-model="ruleForm.merchant_name" style="width: 400px" />
          </el-form-item>
          <el-form-item label="商户描述" prop="desc">
            <el-input v-model="ruleForm.desc" style="width: 400px" rows="5" type="textarea"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="send">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { seachMerchant, addMerchant, changeMerchant } from '@/api/business'
import { pickerOptions, pickTime } from '@/model/DateRange'
// import { sendForm } from '@/utils/'

export default {
  name: 'Help',
  data() {
    return {
      dialogFormVisible: false,
      page: 1,
      size: 20,
      total_count: 0,
      tableData: [],
      form: {},
      merchant_name: undefined,
      id: '',
      sendDate: {},
      pickTime1: pickTime,
      pickerOptions: pickerOptions,
      Rules: {
        qa_type: [{ required: true, trigger: 'blur' }],
        question: [{ required: true, trigger: 'blur' }],
        answer: [{ required: true, trigger: 'blur' }]
      },
      key_mapper: [{ key: 'merchant_name', name: '商户名称', width: 120 }, { key: 'desc', name: '商户描述', width: 120 },
        { key: 'updated_at', name: '最后修改时间', width: 200 }
      ],
      ruleForm: {
        merchant_name: '',
        desc: ''
      },
      rules: {
        business_name: [
          { required: true, message: '请输入商户名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, min: 1, message: '请填写商户描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData({ page: this.page, size: this.size })
  },
  methods: {
    currentChange(val) {
      this.sendDate.page = val
      this.getData(this.sendDate)
    },
    seach() {
      const data = {
        merchant_name: this.merchant_name,
        updated_at_gte: this.pickTime1[0] || '',
        updated_at_lt: this.pickTime1[1] || ''
      }
      this.getData(data)
    },
    getData(data) {
      const dd = JSON.parse(JSON.stringify(data))
      seachMerchant(dd).then(res => {
        this.sendDate = JSON.parse(JSON.stringify(data))
        this.total_count = res.data.total_count
        this.tableData = res.data.list
      }, err => {
        this.$message({ type: 'error', message: err.response.data.msg })
      })
    },
    edit(row) {
      this.id = row.id
      this.ruleForm = {
        merchant_name: row.merchant_name,
        desc: row.desc
      }
      // debugger
      this.dialogFormVisible = true
    },
    addBusin() {
      this.id = ''
      this.ruleForm = {}
      this.dialogFormVisible = true
    },
    // deleteqa(id) {
    //   this.$confirm(`确认删除ID为${id}的项吗？`, '是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     deletBusiness(id).then(() => {
    //       this.$message({ type: 'success', message: '删除成功!' })
    //     }, err => {
    //       this.$message({ type: 'error', message: err.response.data.msg })
    //     })
    //   }).catch(() => {
    //     // this.$message({
    //     //   type: 'info',
    //     //   message: '已取消删除'
    //     // });
    //   })
    // },
    clear() {
      this.ruleForm = {
        business_name: '',
        description: ''
      }
    },
    send() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          console.log('error submit!!')
          return false
        }
        if (this.id) {
          changeMerchant(this.id, this.ruleForm).then(() => {
            this.$message({ message: '保存成功', type: 'success' })
            this.dialogFormVisible = false
            this.clear()
            this.getData(this.sendDate)
          }, err => {
            this.$message({ type: 'error', message: err.response.data.msg })
          })
        } else {
          addMerchant(this.ruleForm).then(() => {
            this.$message({ message: '保存成功', type: 'success' })
            this.dialogFormVisible = false
            this.clear()
            this.getData(this.sendDate)
          }, err => {
            this.$message({ type: 'error', message: err.response.data.msg })
          })
        }
      })
    }

  }

}
</script>

